<template>
  <div class="custom-body" :style="borderStyle">
    <default-tabs-column-header v-if="showHeader" :temp="temp" @callback="callBack" />
    <div class="custom-content">
      <component
        :is="template"
        v-if="template"
        :show-header="false"
        :temp="column"
      />
    </div>
  </div>
</template>
<script>
import DefaultTabsColumnHeader from '@/portal4.1/pc/component/column/DefaultTabsColumnHeader.vue'
import { layout } from '@/mixins/layout'
import { template } from '@/mixins/template'
export default {
  name: 'Portal4PcTabsTempV1',
  components: { DefaultTabsColumnHeader },
  mixins: [layout, template],
  data() {
    return {
      template: null,
      column: {}
      // borderStyle: {}
    }
  },
  computed: {
    themes() {
      return this.$store.getters.theme
    },
    lineStyle() {
      return { '--font-color': this.layoutTheme.menuColor, '--font-active-color': this.layoutTheme.menuActiveColor, '--back-color': this.layoutTheme.menuActiveBackground }
    }
  },
  methods: {
    callBack(data) {
      this.template = data.component
      this.column = data.temp
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-body {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
  align-items: center;
}
.custom-content {
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  overflow: hidden;
  // padding: 0 20px;
  box-sizing: border-box;
}
</style>
